<template>
	<view class="shop-info">
	  <view class="info-top">
	    <image :src="shop.logo" class="i-img"/>
	    <view class="shop-tit">
	      <view class="title">
					<Tag :bgc="shop.open_status==1?'#4CD995':'#999999'" :text="shop.open_status==1?'营业中':'休息中'" />
	        <view class="shop-name"> {{shop.name}} </view>
	      </view>
	      <view class="mark-num">
	        <view class="mark">
	          <view class="mark-tit"> 评分 </view>
	          <view class="mark-value mp"> {{shop.comment_score}}分 </view>
	        </view>
	        <view class="mark">
	          <view class="mark-tit"> 销量 </view>
	          <view class="mark-value"> {{shop.goods_sales}} </view>
	        </view>
	        <view class="mark" @click="emit('shopEva')">
	          <view class="mark-tit"> 店铺评价 </view>
	          <view class="mark-value"> {{shop.comment_num}} </view>
	        </view>
	      </view>
	    </view>
	  </view>
	  <view class="info-intro"> 
      <view class="text"> 店铺简介：{{shop.describe_text}} </view>
    </view>
	  <view class="info-location">
	    <view class="distance">
	      距离：<text> {{distance}} </text>
	    </view>
	    <view class="nav-phone">
	      <view class="nav" @tap="openLoaction">
	        <image src="/static/icon/home/nav.png" class="n-img"/>
					<text> 导航 </text>
	      </view>
	      <view class="nav" @tap="callPhone" v-if="!isMobile">
	        <image src="/static/icon/home/phone.png"  class="n-img"/>
					<text> 电话 </text>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import Tag from '@/components/Tag.vue';
	const props = defineProps(['shop', 'isMobile'])
  const emit = defineEmits(['shopEva'])
	const distance = computed(() => {
		return (props.shop.distance / 1000).toFixed(1) + 'km'
	})
	const callPhone = () => {
		uni.makePhoneCall({
			phoneNumber: props.shop.mobile
		})
	}
	const openLoaction = () => {
		console.log(props.shop);
		const { latitude, longitude, name} = props.shop
		console.log(latitude, longitude, name);
	}
</script>

<style scoped lang="scss">
	.shop-info {
	  width: 100%;
	  padding: 10px 22px 0;
	  box-sizing: border-box;
    position: relative;
    z-index: 99;
	  .info-top {
	    padding: 10px 10px 0;
	    background-color: #fff;
	    border-radius: 10px 10px 0 0;
	    display: flex;
	    .i-img {
	      width: 60px;
	      height: 60px;
	      margin-right: 12px;
				border-radius: 10px;
	    }
	    .shop-tit {
	      .title {
	        display: flex;
	        align-items: center;
	        .shop-name {
	          margin-left: 3px;
	          color: #333333;
	          font-weight: bold;
	          font-size: 16px;
	        }
	      }
	      .mark-num {
	        margin-top: 8px;
	        display: flex;
	        font-size: 12px;
	        color: #999999;
	        .mark {
	          position: relative;
	          padding: 0 24px;
	          &:nth-of-type(1) {
	            padding-left: 0;
	          }
	          &::before {
	            display: block;
	            content: '';
	            position: absolute;
	            right: 0;
	            top: 50%;
	            transform: translateY(-50%);
	            width: 1px;
	            height: 14px;
	            background-color: #E6E6E6;
	          }
	          &:nth-last-of-type(1):before {
	            display: none;
	          }
	          .mark-value {
	            margin-top: 4px;
	            color: #333333;
	            .mp {
	              color: #FF3B1E !important;
	            }
	          }
	        }
	      }
	    }
	  }
	  .info-intro {
	    font-weight: 400;
	    font-size: 12px;
	    color: #999999;
	    line-height: 16px;
	    padding: 10px;
	    background-color: #fff;
	    box-sizing: border-box;
	    border-bottom: 1px solid #E6E6E6;
      :deep(.text) {
        word-break: break-all;
      }
	  }
	  .info-location {
	    display: flex;
	    justify-content: space-between;
	    padding: 11px;
	    box-sizing: border-box;
	    background-color: #fff;
	    border-radius: 0 0 10px 10px;
	    .distance {
	      font-weight: 400;
	      font-size: 12px;
	      color: #AAAAAA;
	      line-height: 14px;
	      text {
	        color: #333333;
	      }
	    }
	    .nav-phone {
	      font-weight: 400;
	      font-size: 11px;
	      color: #666666;
	      line-height: 13px;
	      display: flex;
	      .nav {
	        display: flex;
	        align-items: center;
	        .n-img {
	          width: 16px;
	          height: 16px;
	          margin-right: 6px;
	        }
	        &:nth-of-type(1) {
	          margin-right: 40px;
	        }
	      }
	    }
	  }
	}
</style>